<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/backend/plugins/element-ui/index.css"/>
  <style>
      .el-input {
          width: 300px;
      }
  </style>
</head>
<body>
<div id="app" style="margin: 50px 50px">
  <el-form :label-position="labelPosition" label-width="80px" :model="orders">
    <el-form-item label="商品名称">
      <el-input v-model="orders.goodsName" readonly></el-input>
    </el-form-item>
    <el-form-item label="图片">
      <img v-if="orders.image" :src="getImage(orders.image)" class="avatar" style="height: 300px;width: 300px">
      <el-upload
              class="upload-demo"
              action="/common/upload"
              :on-success="handleAvatarSuccess"
              :show-file-list="false"
              :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item label="描述">
      <el-input v-model="orders.goodsDetail" readonly type="textarea"></el-input>
    </el-form-item>
    <el-form-item label="价格">
      <el-input v-model="orders.price"></el-input>
    </el-form-item>
    <el-form-item label="数量">
      <el-input v-model="orders.amount"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <span>        '1': '待付款',
                    '2': '待配送',
                    '3': '已派送',
                    '4': '已完成',
                    '5': '已取消'</span>
      <el-input v-model="orders.status">
      </el-input>
    </el-form-item>
    <el-form-item label="收货人">
      <el-input v-model="orders.consignee" type="textarea"></el-input>
    </el-form-item>
    <el-form-item label="收货地址">
      <el-input v-model="orders.address"></el-input>
    </el-form-item>
    <el-form-item label="电话">
      <el-input v-model="orders.phone"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm()">提交</el-button>
    </el-form-item>
  </el-form>
</div>
<script src="/backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="/backend/plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="/backend/plugins/axios/axios.min.js"></script>
<script src="/backend/js/request.js"></script>
<script src="/backend/api/orders.js"></script>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                page: window.localStorage.getItem('page'),
                pageSize: window.localStorage.getItem('pageSize'),
                fileList: [],
                labelPosition: 'right',
                id: '',
                orders: {
                    goodsName: '',
                    image: '',
                    goodsDetail: '',
                    price: '',
                    status: '',
                    amount: '',
                    consignee: '',
                    phone: '',
                    address: ''
                },
                statusMap: {
                    '1': '待付款',
                    '2': '待配送',
                    '3': '已派送',
                    '4': '已完成',
                    '5': '已取消'
                },
                nowStatus: ''
            };
        },
        mounted: function () {
            this.init()
        },
        methods: {
            async init() {
                let str = location.href;
                //查找关键字
                let l = str.indexOf('=');
                if (l !== -1) {
                    this.nowStatus = 1
                    let r = str.length
                    //取两者之间的字符串截取
                    this.id = str.substr(l + 1, r - l - 1)
                    await queryOrdersById(this.id).then(res => {
                        if (String(res.code) === '1') {
                            this.orders = res.data
                            window.document.title = this.orders.name
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                } else {
                    this.nowStatus = 0
                }

            },
            submitForm(formName, st) {
                let params = {
                    orders: this.orders,
                    page: this.page,
                    pageSize: this.pageSize
                }
                if (!this.orders.image) {
                    this.$message.error('请上传订单图片')
                    return
                }
                if (this.nowStatus === 0) {
                    // addOrders(params).then(res => {
                    //     if (res.code === 1) {
                    //         this.$message.success('订单添加成功！')
                    //         window.location.href = '/backend/pages/orders/list.html'
                    //     } else {
                    //         this.$message.error(res.msg || '操作失败')
                    //     }
                    // }).catch(err => {
                    //     this.$message.error('请求出错了：' + err)
                    // })
                } else {
                    editOrders(params).then(res => {
                        if (res.code === 1) {
                            this.$message.success('订单修改成功！')
                            window.location.href = '/backend/pages/orders/list.html'
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                }
            },
            getImage(image) {
                return `/common/download?name=${image}`
            },
            handleAvatarSuccess(res, file) {
                this.orders.image = res.data;
            }
        }
    })

</script>
</html>